<template>
    <el-form
        :model="newParkings"
        :rules="rules"
        ref="newParkings"
        label-width="100px"
        class="demo-newParkings"
    >
        <el-form-item label="地址名称" prop="address">
            <el-input v-model="newParkings.address"></el-input>
        </el-form-item>
        <el-form-item label="产权信息" prop="property">
            <el-input v-model="newParkings.property"> </el-input>
        </el-form-item>
        <el-form-item label="车位号" prop="carNumber">
            <el-input v-model="newParkings.carNumber"> </el-input>
        </el-form-item>
        <el-form-item label="出租周期" placeholder="请选择出租周期">
            <el-select v-model="newParkings.cycle">
                <el-option label="3个月" value="3"></el-option>
                <el-option label="6个月" value="6"></el-option>
                <el-option label="9个月" value="9"></el-option>
                <el-option label="12个月" value="12"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="出租价格" prop="price">
            <el-input v-model="newParkings.price"> </el-input>
        </el-form-item>
        <el-form-item label="上传车位照片">
                <el-upload
                    action="http://localhost:3000/images/upload"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
        <el-form-item id="add-button">
            <el-button type="primary" @click="doAddParkings(newParkings)"
                >立即创建</el-button
            >
            <el-button @click="resetForm('newParkings')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("parkings");
const { mapState: lessorsMapState } = createNamespacedHelpers("lessors");
export default {
    data() {
        return {
            newParkings: {
                address: "",
                property: "",
                cycle: "",
                price: "",
                lessorsId: "",
                state: 1,
                carNumber: "",
                imagesName:''
            },
            rules: {
                address: [
                    {
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur",
                    },
                ],
                property: [
                    {
                        required: true,
                        message: "请输入产权信息",
                        trigger: "blur",
                    },
                ],
                cycle: [
                    {
                        required: true,
                        message: "请选择出租周期",
                        trigger: "change",
                    },
                ],
                price: [
                    {
                        required: true,
                        message: "请输入出租价格",
                        trigger: "blur",
                    },
                ],
                carNumber: [
                    {
                        required: true,
                        message: "请输入车位号",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    computed: {
        ...lessorsMapState(["nowLessors"]),
    },
    methods: {
        async doAddParkings(newParkings) {
            const data = await this.addParkings({
                ...newParkings,
                lessorsId: this.nowLessors._id,
            });
            if (data.status) {
                alert("添加成功，已送审核，请等待");
            }
        },
        ...mapActions(["addParkings"]),
        resetForm(newParkings) {
            this.$refs[newParkings].resetFields();
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response){
            if(response.status){
                this.newParkings.imagesName=response.result
            }
        },
    },
};
</script>

<style>
#add-button {
    text-align: center;
}
</style>